<template>
  <div id="iDefined">
    <m-header :systemName="systemName"
              :activeName="activeName"
              :isSelect="false"
              :is-back="false"
              @onSelectMenu="onSelectMenu">
    </m-header>
    <section class="idefinded-main">
      <div class="main-top">
        <div class="main-head-l">
          <div class="margin-30">
            <!--            <span>选择日期 :</span>-->
            <!--            <span class="divtime">-->
            <!--          <DatePicker :clearable="false" type="daterange" :value="initDate" @on-change="dateChange"-->
            <!--                      placement="bottom-end" placeholder="请选择日期" style="width: 260px"></DatePicker>-->
            <!--        </span>-->
            <m-date-picker :startTime="startTime" @startChange="startChange" @endChange="endChange"
                           :endTime="endTime">
            </m-date-picker>
            <span class="switch-single">
          <RadioGroup v-model="checkName" @on-change="changeRadio">
            <Radio :label="name" v-for="(name, index) in ['总量', '单车']" :key="index"></Radio>
          </RadioGroup>
        </span>
          </div>

          <div class="margin-30">
            <span>类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型 :</span>
            <RadioGroup v-model="type" type="button" @on-change="radioChange">
              <Radio :label="name" v-for="(name, index) in typeList" :key="index"></Radio>
            </RadioGroup>
          </div>
          <div>
            <span>时间粒度 :</span>
            <RadioGroup v-model="checkTime" @on-change="changeTimeRadio">
              <Radio style="font-size: 16px" :label="name" v-for="(name, index) in checkTimeList" :key="index"></Radio>
            </RadioGroup>
          </div>
        </div>

        <div class="main-head-r">
          <div class="left-wapper">
            <div class="select-workspace condition-form">
              空间选择 :
              <Tooltip :content="workSpaceTip" placement="top">
                <Cascader :data="workSpaceData" v-model="spaceValue" change-on-select
                          clearable
                          @on-change="changeWorkSpace"
                          @on-visible-change="visibleChange"
                          style="width: 350px;"></Cascader>
              </Tooltip>
            </div>
            <div class="select-history">
              <ul class="select-history-text">
                <li v-for="(item, index) in compareData" :key="index">
                  <span>{{item.name}}</span>
                  <Icon type="ios-close" @click="delClick(item, index)" style="cursor: pointer"/>
                </li>
              </ul>
              <div class="select-history-btn" v-show="compareData.length > 0">
                <Button type="warning" style="margin-right: 20px" @click="resetCompareData">重 置</Button>
                <Button type="primary" @click="queryCompareData">统 计</Button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="main-bottom">
        <div class="right-linechart">
          <div id="idefined-card" ref="compare"></div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
  import echarts from 'echarts'
  import MHeader from '../../components/common/mHeader'
  import mDate from '../../components/common/mDate'
  import MDatePicker from '../../components/common/mDatePicker'
  import {compareValue, unitFilter} from '../../components/common/mixin/tools.js'
  // import {mapState, mapActions} from 'vuex'
  export default {
    name: 'userDefinedNew',
    props: {},
    data () {
      return {
        checkTime: '日',
        checkTimeList: ['年', '月', '日', '时'],
        systemName: '智慧能耗管理系统',
        activeName: 'energyOverview',
        type: '碳排',
        typeList: ['碳排', '成本', '电', '水', '燃气', '蒸汽', '冷量', '压缩空气'],
        isCheck: false,
        checkName: '总量',
        // 空间选择 和自定义对比, 整体布局  在 下面
        workSpaceData: [],
        // 选中的 值的 集合
        spaceValue: [],
        // 待比较的 对象的 数组集合
        compareData: [],
        // 需要的 childObj 对象
        childObj: {},
        // tip 显示的 文本
        workSpaceTip: '',
        // 自定义对比 的图形 假数据
        // initDate: [new Date().format('yyyy-MM-dd'), new Date().format('yyyy-MM-dd')],
        startTime: new Date().format('yyyy-MM-dd'),
        endTime: new Date().format('yyyy-MM-dd'),
        // end
      }
    },

    created () {
    },
    watch: {
      // '$route': 'activePath'
    },
    mounted () {
      // this.activeName = this.$route.name
      // 空间选择 的 接口 (碳排,电,水等等)
      this.ensTree({type: this.type, factory: 'ZZ'})
      // this.initEnsTree()
    },
    computed: {},
    methods: {
      // 日期改变的 方法
      // dateChange (val) {
      //   this.initDate = val
      //   if (this.compareData.length > 0) {
      //     this.commonQueryCompareData()
      //   }
      // },
      // 开始时间选项 改变的方法
      startChange (val) {
        this.startTime = val
        if (compareValue(this.startTime, this.endTime)) {
          if (this.compareData.length > 0) {
            // this.commonQueryCompareData()
            return false
          } else {
            this.$Notice.error({
              title: '提示',
              desc: '请选择空间选择...'
            })
          }
        } else {
          this.$Notice.warning({
            title: '提示',
            desc: '开始时间必须小于结束时间...'
          })
        }
      },
      // 结束时间选项 改变的方法
      endChange (val) {
        this.endTime = val
        if (compareValue(this.startTime, this.endTime)) {
          if (this.compareData.length > 0) {
            // this.commonQueryCompareData()
            return false
          } else {
            this.$Notice.error({
              title: '提示',
              desc: '请选择空间选择...'
            })
          }
        } else {
          this.$Notice.warning({
            title: '提示',
            desc: '开始时间必须小于结束时间...'
          })
        }
      },
      // 自定义 对比的 公共方法
      _getComparisonData (url, data = {}) {
        return window.myapi.getComparisonData(url, data).then(function (res) {
          if (res.status === 200) {
            return res.data.data
          } else {
            self.$Message.error('请求数据失败!')
          }
        }).catch(function (e) {
          self.$Message.error('请求数据失败!')
        })
      },
      // 自定义对比 echarts 图
      compareEcharts (data) {
        let dom = this.$refs.compare
        let myChart = echarts.init(dom)
        let option = {
          title: {
            text: '自定义走势对比    ' + unitFilter(this.checkName, this.type),
            textStyle: {
              color: '#fff',
              // color: 'rgba(125, 161, 255, .7)',
              fontSize: '20',
              fontWeight: 'normal'
            },
            padding: [20, 14]
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            // axisTick: {
            //   length: 10,
            //   alignWithLabel: true,
            //   lineStyle: {
            //     color: '#8C99B6'
            //   }
            // },
            axisLabel: {
              color: '#fff'
              // margin: 20
              // formatter: (value, index) => {
              //   console.log(index)
              // }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#8C99B6'
              }
            },
            data: data[0].data.map(function (item) {
              return item[0]
            })
          },
          yAxis: {
            splitLine: {
              show: false
            },
            axisLabel: {
              inside: false,
              margin: 15,
              show: true,
              color: '#fff'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#8C99B6'
              }
            }
          },
          // toolbox: {
          //   left: 'center',
          //   feature: {
          //     dataZoom: {
          //       yAxisIndex: 'none'
          //     },
          //     restore: {},
          //     saveAsImage: {}
          //   }
          // },
          dataZoom: [{
            textStyle: {
              color: '#fff'
            }
          }, {
            type: 'inside'
          }],
          // visualMap: {
          //   textStyle: {
          //     color: 'rgba(125, 161, 255, .7)'
          //   },
          //   top: 10,
          //   right: 10,
          //   pieces: [{
          //     gt: 0,
          //     lte: 50,
          //     color: '#096'
          //   }, {
          //     gt: 50,
          //     lte: 100,
          //     color: '#ffde33'
          //   }, {
          //     gt: 100,
          //     lte: 150,
          //     color: '#ff9933'
          //   }, {
          //     gt: 150,
          //     lte: 200,
          //     color: '#cc0033'
          //   }, {
          //     gt: 200,
          //     lte: 300,
          //     color: '#660099'
          //   }, {
          //     gt: 300,
          //     color: '#7e0023'
          //   }],
          //   outOfRange: {
          //     color: '#999'
          //   }
          // },
          // series: {
          //   name: 'Beijing AQI',
          //   type: 'line',
          //   data: this.compareEchartsData.map(function (item) {
          //     return item[1]
          //   }),
          //   markLine: {
          //     silent: true,
          //     data: [{
          //       yAxis: 50
          //     }, {
          //       yAxis: 100
          //     }, {
          //       yAxis: 150
          //     }, {
          //       yAxis: 200
          //     }, {
          //       yAxis: 300
          //     }]
          //   }
          // }
          series: data.map(item => {
            let obj = {
              name: item.name,
              type: 'line',
              data: item.data.map(function (item) {
                return item[1]
              }),
              // markLine: {
              //   silent: true,
              //   data: [{
              //     yAxis: 50
              //   }, {
              //     yAxis: 100
              //   }, {
              //     yAxis: 150
              //   }, {
              //     yAxis: 200
              //   }, {
              //     yAxis: 300
              //   }]
              // }
            }
            return obj
          })
        }
        if (option && typeof option === 'object') {
          myChart.setOption(option, true)
          window.addEventListener('resize', () => {
            myChart.resize()
          })
        }
      },
      // 空间选择 隐藏时候 触发的函数
      visibleChange (flag) {
        if (!flag) {
          if (Object.keys(this.childObj).length === 0) {
            return false
          }
          if (this.compareData.length > 0) {
            // 开关设置 懒得封装方法了,  暂时只有一个地方用到
            let s = true
            // for (let i = 0, len = this.compareData.length; i < len; i++) {
            //   // 如果 改变了, id组合 在 数组里 找到 相等了 ,  开关 为 false
            //   if (this.childObj.id.join('') === this.compareData[i].id.join('')) s = false
            // }
            for (let i = 0, len = this.compareData.length; i < len; i++) {
              // 如果 改变了, id组合 在 数组里 找到 相等了 ,  开关 为 false
              if (this.childObj.name === this.compareData[i].name) s = false
            }
            // 遍历结束 没找到 ,  数组 推进这个 对象 obj
            if (s && this.spaceValue.length) this.compareData.push(this.childObj)
          } else {
            this.compareData.push(this.childObj)
          }
        }
      },
      // 改变 空间选择的 方法
      changeWorkSpace (workSpace, selectedData) {
        let str = ''
        for (let i = 0; i < selectedData.length; i++) {
          if (!i) {
            str = selectedData[i].label
          } else {
            str = str + '/' + selectedData[i].label
          }
        }
        this.workSpaceTip = str
        this.childObj = {
          id: workSpace,
          name: str
        }
        // this.workSpaceString = workSpace[workSpace.length - 1]
        // this.workSpaceName = selectedData.map(item => item.label).join('/')
        // 选择完成后的回调，返回值 value 即已选值 workSpace，selectedData 为已选项的具体数据
        this.spaceValue = workSpace
      },
      // 空间选择  树形数据
      ensTree (obj = {}) {
        window.myapi.ensTree(obj).then(res => {
          if (res.data.status === 200) {
            this.workSpaceData = res.data.data
            if (this.workSpaceData.length === 0) {
              this.$Message.info('空间架构无数据，请补充数据')
              return false
            }
          }
        }).catch(function (e) {
          // console.log(e)
        })
      },
      // 初始化空间架构 的 请求接口
      // initEnsTree () {
      //   window.myapi.postSpace({type: '模板'}).then(res => {
      //     if (res.data.status === 200) {
      //       this.workSpaceData = res.data.data
      //     }
      //   }).catch(function (e) {
      //     console.log(e)
      //   })
      // },
      // 重置 对比的 对象数组 和 空间选中的值
      resetCompareData () {
        this.spaceValue = []
        this.compareData = []
        echarts.init(this.$refs.compare).clear()
      },
      // 对比的 方法
      queryCompareData () {
        this.commonQueryCompareData()
      },
      // 公共的 自定义 对比的 请求接口的方法
      async commonQueryCompareData () {
        // let [startTime, endTime] = this.initDate
        let target = this.compareData.map(v => v.id[v.id.length - 1])
        let targetName = this.compareData.map(v => v.name)
        let timeLevel = null
        switch (this.checkTime) {
          case '日':
            timeLevel = 3
            break
          case '年':
            timeLevel = 1
            break
          case '月':
            timeLevel = 2
            break
          case '时':
            timeLevel = 4
            break
          default:
            break
        }
        // let jsonStr = JSON.stringify({
        //   dataType: this.checkName === '总量' ? 'total' : 'single',
        //   energy: this.type,
        //   startTime: startTime,
        //   endTime: endTime,
        //   timeLevel: timeLevel,
        //   target: target.join(),
        //   targetName: targetName.join()
        // })
        let postData = {
          // json: jsonStr
          dataType: this.checkName === '总量' ? 'total' : 'single',
          energy: this.type,
          startTime: this.startTime,
          endTime: this.endTime,
          timeLevel: timeLevel,
          target: target.join(),
          targetName: targetName.join()
        }
        let data = await this._getComparisonData('customizeComparison', postData).then(res => res)
        // 自定义对比 echarts 图形
        this.compareEcharts(data)
      },
      // 删除 当前选中的 数据
      delClick (item, index) {
        if (item.id.join('') === this.spaceValue.join('')) this.spaceValue = []
        if (this.compareData.length > 1) {
          this.compareData.splice(index, 1)
          this.commonQueryCompareData()
        } else {
          this.compareData.splice(index, 1)
          echarts.init(this.$refs.compare).clear()
        }
      },
      // 子路由 菜单的 点击事件
      onSelectMenu (item) {
        this.activeName = item.name
        this.$router.push({
          name: item.name
        })
      },
      // 总量 和 单车 的选项方法
      changeRadio (name) {
        this.checkName = name
        if (this.compareData.length > 0) {
          // this.commonQueryCompareData()
          return false
        } else {
          this.$Notice.error({
            title: '提示',
            desc: '请选择空间选择...'
          })
        }
      },
      // 年 月 日 时 粒度 的选择方法
      changeTimeRadio (name) {
        this.checkTime = name
        if (this.compareData.length > 0) {
          // this.commonQueryCompareData()
          return false
        } else {
          this.$Notice.error({
            title: '提示',
            desc: '请选择空间选择...'
          })
        }
      },
      // 能源种类的 方法 (如 碳排,电,水等等)
      radioChange (name) {
        this.workSpaceData = []
        this.spaceValue = []
        this.type = name
        this.ensTree({type: this.type, factory: 'ZZ'})
        // this.resetCompareData()
        if (this.compareData.length > 0) {
          // this.commonQueryCompareData()
          return false
        } else {
          this.$Notice.error({
            title: '提示',
            desc: '请选择空间选择...'
          })
        }
      }
    },
    destroyed () {
    },
    components: {MDatePicker, MHeader, mDate}
  }
</script>

<style lang='scss'>
  #iDefined {
    @include system-bg;

    .idefinded-main {
      color: #fff;
      width: 1800px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      height: 100%;

      .main-top {
        flex: 0 0 24%;
        display: flex;

        .main-head-l {
          div.margin-30 {
            margin-bottom: 40px;
          }

          > div {
            > span:nth-child(1) {
              width: 100px;
              font-size: 16px;
              display: inline-block;
            }
          }

          flex: 1;
          background: rgba(15, 27, 67, 0.6);
          margin-right: 10px;
          padding: 20px;

          .divtime {
            margin-right: 80px;
          }

          .switch-single {
            /*margin-right: 50px;*/
            color: #fff;
            padding-left: 30px;

            .ivu-radio-wrapper {
              font-size: 18px;
              margin-right: 22px;
            }
          }

          .ivu-input {
            background: #0c183e;
            font-size: 16px;
            color: #fff;
            border-radius: 0px;
            border: 0;
          }

          .ivu-icon-ios-calendar-outline {
            color: $font-f;
            font-size: 18px;
          }

          .ivu-date-picker .ivu-select-dropdown {
            background-color: #0c183e;
          }
        }

        .main-head-r {
          flex: 1;

          .left-wapper {
            background: rgba(15, 27, 67, 0.6);
            padding: 20px;
            font-size: 16px;
            height: 100%;

            .select-workspace {
              padding-bottom: 20px;
              color: $font-f;
            }

            .select-history {
              .select-history-text {
                height: 140px;
                background: rgba(15, 27, 67, 0.6);
                color: $font-f;
                padding: 10px 0;
                overflow: auto;

                li {
                  height: 28px;
                  line-height: 28px;
                  padding: 0 10px;
                  background-color: rgba(15, 27, 67, 0.6);
                  float: left;
                  width: 50%;

                  span {
                    padding-right: 10px;
                  }
                }
              }

              .select-history-btn {
                text-align: center;
                padding-top: 18px;
              }
            }
          }
        }
      }

      .main-bottom {
        margin-top: 10px;
        flex: 1;
        display: flex;
        height: 580px;

        .right-linechart {
          width: 100%;
          background: rgba(15, 27, 67, 0.6);

          .char-title {
            font-size: 20px;
            color: rgba(125, 161, 255, 1);
          }

          #idefined-card {
            height: 90%;
          }
        }
      }

      .ivu-radio-group-button .ivu-radio-wrapper-checked {
        color: #2d8cf0 !important;
      }

      .ivu-radio-group-button .ivu-radio-wrapper:hover {
        position: relative;
        color: #2d8cf0 !important;
      }

      .ivu-radio-group-button .ivu-radio-wrapper {
        background: rgba(15, 27, 67, 0.5);
        border: 1px solid #2d8cf0;
        font-size: 18px;
        color: #fff;
      }

      .ivu-radio-group-button .ivu-radio-wrapper:before, .ivu-radio-group-button .ivu-radio-wrapper:after {
        background: #2d8cf0;
      }
    }
  }

  ul::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb {
    background: rgba(35, 89, 188, 1)
  }
</style>
